<template>
    <div class="news-container">
        <div class="news-header">
            <img   
           :src="
            firstNews.images.length > 0
              ? firstNews.images[0]
              : require('../../assets/img/PopularRecommendations.png')
          "
          />
            <div class="header-text">
                <h2>{{ firstNews.title }}</h2>
                <p>
                    {{ firstNews.summary }}
                </p>
            </div>
        </div>

        <ul class="news-list">
            <li v-for="(item, index) in newsList" :key="index">
                <i class="iconfont icon-tushuqikan item-icon"></i>
                <span class="item-title" :title="item.Content">{{ item.Content }}</span>
                <span class="item-date">{{ item.createTime }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import service from "@/service/service";

export default {
    data() {
        return {
            newsList: [
              
            ],
            firstNews: {
                images: [],
            }
        };
    },
    methods: {
    //    热门推荐
      async getNewsList(){
        try {
        const response = await service({
          url: `/frontend/index/hotRecmd`,
          method: "post",
        });
        if (response.code === 200) {
           const formattedData = response.data.data.map((item) => {
                return {
                    ...item,
               Content: `[${item.resourceTag?.tagName || ''}${item.resourceTag?.tagName && item.type?.typeName ? ' | ' : ''}${item.type?.typeName || ''}] ${item.title}`


                 
                };
            });
            
            this.firstNews = formattedData[0] || {};
            this.newsList = formattedData.slice(1, 8);
        } else {
          this.$message.error(response.msg);
        }
      } catch (error) {
        console.error("获取焦点资源列表失败:", error);
      }
       } 
    },
    mounted() {
        this.getNewsList();
    },
    
};
</script>

<style lang="scss" scoped>
.news-container {
    margin: 0 auto;
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

.news-header {
    display: flex;
    margin-bottom: 20px;

    img {
        width: 353px;
        height: 194px;
        margin-right: 20px;
        border-radius: 4px;
    }

    .header-text {
        flex: 1;

        h2 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24px;
            color: #333333;
            margin-bottom: 8px;
            display: -webkit-box;
            /* 必须结合的属性 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 2行 */
            overflow: hidden;
        }

        p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
            line-height: 36px;
            display: -webkit-box;
            /* 必须结合的属性 */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            /* 3行 */
            overflow: hidden;
        }
    }
}

.news-list {
    list-style: none;
    padding: 0;

    li {
        padding: 12px 0;
        // border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;

        .item-icon {
            font-size: 20px;
            color: #9999;
           margin-right: 5px;
        }


        .item-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
              cursor: pointer;

        &:hover {
          color: #327dff;
        }

        }

        .item-date {
            margin-left: 67px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }
    }
}
</style>